<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 登录标题 -->
      <div class="login-header">
        <h1 class="title">用户管理系统</h1>
        <p class="subtitle">欢迎登录</p>
      </div>

      <!-- 登录表单 -->
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        @finish="handleLogin"
      >
        <a-form-item name="username">
          <a-input
            v-model:value="formData.username"
            size="large"
            placeholder="请输入用户名"
            :prefix="h(UserOutlined)"
          />
        </a-form-item>

        <a-form-item name="password">
          <a-input-password
            v-model:value="formData.password"
            size="large"
            placeholder="请输入密码"
            :prefix="h(LockOutlined)"
            @pressEnter="handleLogin"
          />
        </a-form-item>

        <a-form-item>
          <a-row justify="space-between">
            <a-col>
              <a-checkbox v-model:checked="formData.remember">
                记住我
              </a-checkbox>
            </a-col>
            <a-col>
              <a href="#" class="forgot-password">忘记密码？</a>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            block
            :loading="loading"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>

      <!-- 提示信息 -->
      <div class="login-tips">
        <a-alert
          message="测试账号"
          type="info"
          show-icon
        >
          <template #description>
            <p>管理员：admin / 123456</p>
            <p>普通用户：user01 / 123456</p>
          </template>
        </a-alert>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, h, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import type { FormInstance } from 'ant-design-vue'
import type { LoginForm } from '@/types'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

// 表单引用
const formRef = ref<FormInstance>()

// 加载状态
const loading = ref(false)

// 表单数据
const formData = reactive<LoginForm>({
  username: '',
  password: '',
  remember: false,
})

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度为 3-20 位', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不少于 6 位', trigger: 'blur' },
  ],
}

// 组件挂载时
onMounted(() => {
  // 读取记住的用户名
  const rememberedUsername = authStore.getRememberedUsername()
  if (rememberedUsername) {
    formData.username = rememberedUsername
    formData.remember = true
  }
})

/**
 * 处理登录
 */
async function handleLogin() {
  try {
    loading.value = true

    // 验证表单
    await formRef.value?.validate()

    // 调用登录接口
    const success = await authStore.login(formData)

    if (success) {
      // 登录成功，跳转到目标页面或首页
      const redirect = (route.query.redirect as string) || '/'
      router.push(redirect)
    }
  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="less">
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  .login-box {
    width: 400px;
    padding: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);

    .login-header {
      text-align: center;
      margin-bottom: 32px;

      .title {
        font-size: 28px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
      }

      .subtitle {
        font-size: 14px;
        color: #666;
        margin: 0;
      }
    }

    .forgot-password {
      color: #667eea;

      &:hover {
        color: #764ba2;
      }
    }

    .login-tips {
      margin-top: 24px;

      :deep(.ant-alert-description) {
        p {
          margin: 4px 0;
        }
      }
    }
  }
}
</style>
